<template>
    <a-modal
      title="添加成员"
      :visible="visible"
      @ok="handleAddUser"
      @cancel="$emit('close')"
    >
        <div style="width: 100%">
            <el-input placeholder="请输入成员名称"
                        suffix-icon="el-icon-search"
                        v-model="searchInput"></el-input>
        </div>
        <div class="auth-add-user">
            <div class="auth-add-user-item flex-row"
                    v-for="user in addUsers"
                    :key="user.userId"
                    @click="user.check = !user.check"
            >
                <a-checkbox v-model="user.check">
                </a-checkbox>
                <div class="auth-add-user-name">{{user.userAlia}}</div>
            </div>
        </div>
    </a-modal>
</template>

<script>
export default {
    name: 'userModal',
    props:{
        visible: Boolean,
        userData: {
            type: Array,
            default: []
        }
    },
    data(){
        return {
            searchInput: '',
        }
    },
    methods:{
        handleAddUser(){
            let userData = []
            this.userData.forEach(use => {
                if(use.check){
                    userData.push(use)
                }
            })
            this.$emit('ok', userData)
            this.$emit('close')
        }
    },
    computed: {
        addUsers() {
            return this.userData.filter(u => u.userAlia.includes(this.searchInput))
        }
    },
    mounted(){
    }
}
</script>

<style>
    .auth-add-user{
        width: 100%;
        height: 400px;
        margin-top: 10px;
        overflow-y: auto;
    }
    .auth-add-user-item{
        width: 100%;
        height: 30px;
        align-items: center;
        margin-top: 5px;
        cursor: pointer;
    }
    .auth-add-user-name {
        margin-left: 10px;
    }
</style>